<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/House6.css">
    <script>
        window.onload = function() {
            var picnav = document.getElementById("picture-nav"); //这种方式只能在id dom下获取子节点
            var li = picnav.getElementsByTagName("li"); //获取picnav下的li标签的dom 以便对下标的操作
            var banner = document.getElementById("banner");
            var div = banner.getElementsByTagName("div"); //获取banner下的的div图片区dom

            for (var i = 0; i < li.length; i++) { //获取所有i编号的元素
                li[i].index = i; //定义一个index属性对li进行编号
                li[i].onclick = function() { //再注册一个点击事件，当点击的时候所有标签都恢复最初状态
                    for (var n = 0; n < li.length; n++) { //这步是相对于未被点击部分的样式
                        li[n].className = "";
                        div[n].className = "hidden";
                    }
                    this.className = "on"; //再对点击事件添加相应的属性
                    div[this.index].className = ""; //通过之前的index编号绑定的指定div
                }
            }
        }
    </script>

</head>

<body>
    <?php
    // 创建连接
    $conn = mysql_connect("localhost:3306", "root", "wohenpi0918");
    mysql_set_charset('utf8', $conn);
    //编码，避免出现乱码
    mysql_select_db("student", $conn);
    //连接数据库
    // 检测连接
    if (!$conn) {
        die("Connection failed: " . mysql_connect_error());
    }
    $sql = "SELECT * FROM rent where id='06'";
    $result = mysql_query($sql, $conn) or die(mysql_error());
    // 取出结果集数据
    $row = mysql_fetch_assoc($result);

    ?>
    <div class="main-container">
        <div class="header-wrap">
            <div class="nav-img">

            </div>
            <form id="form" action="research.php" method="POST">

                <div class="search-div">
                    <input class="search" name="keywords" type="text" placeholder="请输入房源相关信息">
                </div>
                <div class="button" onclick="document.getElementById('form').submit()">
                    搜房
                </div>
            </form>

            <div id="ball"></div>

        </div>

        <div class="ul-div">
            <ul id="ul1">
                <li><a class="active" href="RentHouse.php">HOME</a></li>
                <li><a href="login.php">注册</a></li>
                <li><a href="issue.php">免费发布</a></li>
                <li><a href="#about">我的</a></li>
                <li><a href="#about">小区楼</a></li>
                <li><a href="#about">二手房</a></li>
                <li><a href="#about">生意转让</a></li>
                <li><a href="#about">厂房</a></li>
                <li class="admin">
                    <a href="managelogin.php" target="_blank"><img src="img/管理员.png" class="img1" alt="管理员登陆">管理员登陆</a>
                </li>
            </ul>

        </div>

        <div class="changepicture">
            <div id="picture-nav">
                <ul class="ul">
                    <li class="on">客厅</li>
                    <li>卧室</li>
                    <li>书房</li>
                    <li>厨房</li>
                </ul>
            </div>
            <div id="banner">
                <div id="slide1">

                </div>
                <div id="slide2" class="hidden">

                </div>
                <div id="slide3" class="hidden">

                </div>
                <div id="slide4" class="hidden">

                </div>
            </div>
            <div class="infor">
                <span class="pro">房屋面积：<?php echo "{$row['proportion']}" ?></span><br>
                <span class="ad">详细地址：<?php echo "{$row['address']}" ?></span><br>
                <strong>租金：<?php echo "{$row['rentmoney']}" ?></strong><br>
                <span class="tp">租房类型：<?php echo "{$row['type']}" ?></span><br>
                <span class="tp1">所属区域：<?php echo "{$row['area']}" ?></span><br>
                <span class="tp2">装修情况：<?php echo "{$row['decoration']}" ?></span><br>
                <span class="tp3">周围环境：<?php echo "{$row['surr']}" ?></span>
            </div>



        </div>






    </div>


    <!-- <script type="text/javascript" scr="js/main.js"></script> -->
</body>

</html>